<template>
  <div>
    <el-dialog
      append-to-body
      :title="notice.title"
      :visible.sync="noticeDialogShow"
      width="50%">
      <div v-html="notice.content.replace(/\n/g,'<br>')">

      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="noticeDialogShow = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-popover
      placement="top-start"
      title=""
      width="400"
      trigger="hover">
      <div>
        <div>
          <div v-for="(nt) in notices" class="notice-item" @click="openNotice(nt)">
            <p class="notice-title">
              <i class="el-icon-bell"></i>
              {{nt.title}}
            </p>
            <p class="notice-date">{{nt.releaseTime}}</p>
            <div class="notice-content">{{nt.content}}</div>
          </div>
        </div>
      </div>
      <el-badge :is-dot="hasNewNotice" slot="reference">
        <i v-show="notices.length > 0" class="el-icon-message-solid"></i>
      </el-badge>
    </el-popover>
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
  import {search, getNotice} from "@/api/dept/notice";
  import {setStore, getStore} from '@/util/store'

  export default {
    name: "top-notice",
    data() {
      return {
        notice: {content: ''},
        noticeDialogShow: false,
        notices: [],
        hasNewNotice: false
      };
    },
    created() {
      this.getList()
      this.setNoticeTimer()
    },
    mounted() {
    },
    computed: {
      ...mapGetters([])
    },
    props: [],
    methods: {
      openNotice(notice) {
        this.noticeDialogShow = true;
        getNotice(notice.id).then(res => {
          this.notice = res.data.data || notice
        })
      },
      setNoticeTimer() {
        const rateTime = 3 * 60 * 1000
        this.noticeTimer = setInterval(() => {
          this.getList()
        }, rateTime)
      },
      getList() {
        search().then(res => {
          //拉取新消息
          if (res.data.data.length < 1) {
            return;
          }
          var list = res.data.data.sort(function (a, b) {
            return new Date(b.releaseTime).getTime()
              - new Date(a.releaseTime).getTime()
          });
          var nt = list[0];
          //获取最新的通知时间
          var notice = getStore({name: 'notice_top_last_item'});
          if (!notice || new Date(notice.releaseTime) < new Date(nt.releaseTime)) {
            this.hasNewNotice = true;
            //最新发布时间不一致
            var notify = this.$notify({
              title: '新通知',
              message: nt.title,
              type: 'info',
              duration: 0,
              offset: 45,
              onClick: () => {
                notify.close();
                this.openNotice(nt);
              }
            });
          }
          this.notices = list;
          setStore({name: 'notice_top_last_item', content: nt});

        });
      },
      clearTimer() {
        this.noticeTimer && clearInterval(this.noticeTimer)
        this.noticeTimer = null
      }
    },
    destroyed() {
      this.clearTimer()
    }
  };
</script>

<style lang="scss" scoped>
  .notice-item {
    border-bottom: 1px solid #EBEEF5;
    padding-bottom: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }

  .notice-title {
    font-size: 16px;
    padding-left: 5px;
    padding-right: 5px;
    margin: 0;
  }

  .notice-content {
    color: #888888;
    padding: 5px;
    font-size: 12px;
    margin: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .notice-date {
    color: #888888;
    padding-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
    margin: 0;
  }

  .red {
    color: red;
  }
</style>
